<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title>首页</title>
        <link href="favicon.ico" rel="shortcut icon">
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        <link rel="stylesheet" href="css/common/animation.css">
        <link rel="stylesheet" href="css/common/media.css">
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
        <div class="container">
            <div class="scroll">
                <p class="track"></p>
                <p class="bar" canmove='false'></p>
            </div> 
            <header>
                <div class="tpLft flex flex-align-items">
                    <a href="index.html" class="logo">
                        <img src="img/common/logo.png" alt="logo">
                        <img src="img/common/logoC.png" class="c" alt="logo">
                    </a>
                    <p class="menuBtn flex flex-align-items flex-justify-content">
                        <span></span>
                        <span></span>
                        <span></span>
                    </p>
                </div>
                <div class="menu cursor flex">
                    <div class="side flex flex-align-items">
                        <nav>
                            <a href="index.html">首页</a>
                            <a href="about.html">关于我们</a>
                            <a href="items.html">作品集</a>
                            <a href="recruit.html">招聘</a>
                            <a href="contact.html">联系我们</a>
                        </nav>
                    </div>
                    <div class="products flex">
                        <div class="classify flex flex-align-items">
                            <p data-categories="all">
                                <span>所有产品</span>
                                <sup>22</sup>
                            </p>
                            <p data-categories="sxbl">
                                <span>实心玻璃幕墙系统</span>
                                <sup>10</sup>
                            </p>
                            <p data-categories="cw">
                                <span>除雾墙系统</span>
                                <sup>5</sup>
                            </p>
                            <p data-categories="dl">
                                <span>独立式系统</span>
                                <sup>1</sup>
                            </p>
                            <p data-categories="ssm">
                                <span>伸缩门</span>
                                <sup>6</sup>
                            </p>
                        </div>
                        <div class="palace flex">
                            <a href="itemInfo.html" class="item" data-categories="sxbl">
                                <div class="pic">
                                    <div class="box">
                                        <div class="inner">
                                            <img class="obj-c" src="img/common/item1.jpg" alt="项目图">
                                        </div>
                                    </div>
                                </div>
                                <h1>Mimo</h1>
                                <p>投入少</p>
                            </a>
                            <a href="itemInfo.html" class="item" data-categories="cw">
                                <div class="pic">
                                    <div class="box">
                                        <div class="inner">
                                            <img class="obj-c" src="img/common/item2.jpg" alt="项目图">
                                        </div>
                                    </div>
                                </div>
                                <h1>Arco</h1>
                                <p>多用途吊舱</p>
                            </a>
                            <a href="itemInfo.html" class="item" data-categories="dl">
                                <div class="pic">
                                    <div class="box">
                                        <div class="inner">
                                            <img class="obj-c" src="img/common/item3.jpg" alt="项目图">
                                        </div>
                                    </div>
                                </div>
                                <h1>Zitto</h1>
                                <p>投入少</p>
                            </a>
                            <a href="itemInfo.html" class="item" data-categories="ssm">
                                <div class="pic">
                                    <div class="box">
                                        <div class="inner">
                                            <img class="obj-c" src="img/common/item4.jpg" alt="项目图">
                                        </div>
                                    </div>
                                </div>
                                <h1>Mimo</h1>
                                <p>投入少</p>
                            </a>
                        </div>
                        <div class="btnBox">
                            <p class="btn"><img src="img/common/menuArrow.png" alt="箭头"></p>
                        </div>
                    </div>
                </div>
            </header>
            <main>
                <div class='headSwiper'>
                    <div class="swiper-container swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="contn gap lg">
                                    <p>玻璃隔断</p>
                                    <div class="title">
                                        <h1>Arco</h1>
                                    </div>
                                    <div class="picBox">
                                        <img src="img/index/slide1.jpg" alt="项目图">
                                    </div>
                                    <div class="link">
                                        <a href="itemInfo.html">查看商品</a>
                                    </div>
                                </div>
                                <div class="timer flex">
                                    <div class="page flex">
                                        <p class="current"></p>
                                        <p class="length"></p>
                                    </div>
                                    <i></i>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="contn gap lg">
                                    <p>玻璃隔断</p>
                                    <div class="title">
                                        <h1>Zansl</h1>
                                    </div>
                                    <div class="picBox">
                                        <img src="img/index/slide2.jpg" alt="项目图">
                                    </div>
                                    <div class="link">
                                        <a href="itemInfo.html">查看商品</a>
                                    </div>
                                </div>
                                <div class="timer flex">
                                    <div class="page flex">
                                        <p class="current"></p>
                                        <p class="length"></p>
                                    </div>
                                    <i></i>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="contn gap lg">
                                    <p>玻璃隔断</p>
                                    <div class="title">
                                        <h1>Kiki</h1>
                                    </div>
                                    <div class="picBox">
                                        <img src="img/index/slide3.jpg" alt="项目图">
                                    </div>
                                    <div class="link">
                                        <a href="itemInfo.html">查看商品</a>
                                    </div>
                                </div>
                                <div class="timer flex">
                                    <div class="page flex">
                                        <p class="current"></p>
                                        <p class="length"></p>
                                    </div>
                                    <i></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btns flex flex-align-items">
                        <p class="cursor prev"><img src="img/index/prev.png" alt="后退按钮"></p>
                        <p class="cursor next"><img src="img/index/next.png" alt="前进按钮"></p>
                    </div>
                </div>
                <div class="intro flex ready gap lg">
                    <div class="txtBox flex flex-align-items flex-justify-content">
                        <span class="scrollItem" scroll-start="former" scroll-stop="overself">你的远见。无限制</span>
                        <i class="tp verLine scrollItem" scroll-start="123%" scroll-stop="-83%"></i>
                        <i class="btm verLine scrollItem" scroll-start="200%" scroll-stop="-52%"></i>
                        <p class="txt txtP">穿石科技将平面图转变为建筑空间。具有欧洲风情的我们精通设计的可拆卸玻璃办公墙系统和独立式吊舱创造了卓越的工作环境，将优雅与目的融为一体。我们提供6条生产线，包括：MIMO和FINO，可拆卸的玻璃隔断，EXPO我们的伸缩门，多功能除尘墙系统PLANIKA，最后还有两个独立式吊舱：ARCO和ZITTO。</p>
                    </div>
                    <div class="tips flex flex-align-items flex-justify-content scrollItem" scroll-start="former" scroll-stop="overself">
                        <h1>
                            <p>Muraflex</p>
                            <p>一优越</p>
                            <p>可拆卸</p>
                            <p>玻璃隔断</p>
                        </h1>
                    </div>
                </div>
                <div class="creative gap">
                    <div class="row flex tp">
                        <div class="box pic scrollItem" scroll-start="former" scroll-stop="overself">
                            <p class="picBox">
                                <img src="img/index/creative1.jpg" class="scrollItem" scroll-start="60%" scroll-stop="-70%" alt="插图">
                            </p>
                            <i class="horLine"></i>
                        </div>
                        <div class="box txt">
                            <p class="scrollItem" scroll-start="99%" scroll-stop="11%">创新与绩效</p>
                        </div>                 
                    </div>
                    <div class="row flex btm">
                        <div class="pic box">
                            <p class="picBox minusR">
                                <img src="img/index/creative2.jpg" class="scrollItem" scroll-start="57%" scroll-stop="-73%" alt="插图">
                            </p>
                        </div>
                    </div>
                    <div class="row flex">
                        <div class="box flex scrollItem" scroll-start="former" scroll-stop="overself">
                            <p>拉丝。阳极氧化
                                <br>
                                单板。粉末涂层。
                            </p>
                            <p>
                                单，双
                                <br>
                                和曲面玻璃系统
                            </p>
                        </div>
                    </div>
                </div>
                <div class="idea gap flex">
                    <div class="pic">
                        <p class="picBox">
                            <img src="img/index/idea1.jpg" class="scrollItem" scroll-start="54%" scroll-stop="-96%" alt="插图">
                        </p>
                    </div>
                    <div class="txtBox flex flex-align-items flex-justify-content scrollItem" scroll-start="30%" scroll-stop="-70%">
                        <div class="content">
                            <h1>
                                <p class="scrollItem" scroll-start="former" scroll-stop="overself">—我们是</p>
                                <p class="scrollItem" scroll-start="former" scroll-stop="overself">有想法的</p>
                            </h1>
                            <p class="txtP">我们的工程师精心设计了业内最美观的可拆卸玻璃办公墙解决方案。秉承对研发和生态敏感型设计的坚定承诺，我们旨在成为先锋并开发更好的解决方案，以应对建筑师和设计师不断面临的挑战。</p>
                        </div>
                        <i class="horLine scrollItem" scroll-start="100%" scroll-stop="0%"></i>
                        <i class="verLine"></i>
                    </div>
                </div>
                <div class="flexible gap">
                    <div class="contn flex">
                        <div class="txt">
                            <p class="scrollItem" scroll-start="97%" scroll-stop="-5%">适应性强和可定制</p>
                        </div>
                        <i class="verLine scrollItem" scroll-start="100%" scroll-stop="-47%"></i>
                        <i class="horLine scrollItem" scroll-start="133%" scroll-stop="-11%"></i>
                        <div class="box pic flex-justify-content flex">
                            <div class="picBox">
                                <img src="img/index/flexible.jpg" class="scrollItem" scroll-start="59%" scroll-stop="-68%" alt="插图">
                            </div>
                            <div class="t">
                                <p class="scrollItem" scroll-start="former" scroll-stop="overself">出色的声学性能</p>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="custmz gap">
                    <div class="contn minusR">
                        <h1 class="txt scrollItem" scroll-start="102%" scroll-stop="-32%">
                            <p>做你的</p>
                            <p>道路和寄托</p>
                        </h1>
                        <img src="img/index/custmz.png" alt="配图">
                        <a href="contact.html" class="scrollItem" scroll-start="102%" scroll-stop="-41%">定制</a>
                    </div>
                </div>
            </main>
            <footer>
                <nav class="flex flex-justify-content flex-align-items">
                    <a href="index.html">首页</a>
                    <a href="about.html">关于我们</a>
                    <a href="items.html">作品集</a>
                    <a href="recruit.html">招聘</a>
                    <a href="contact.html">联系我们</a>
                </nav>
                <p class="support">
                    <span>Copyright © 宁波穿石网络科技有限公司 All rights reserved</span>
                    <span>技术支持：穿石科技</span>
                </p>
            </footer>
        </div>
        
        <script src="js/common/swiper.js"></script>
        <script src="js/common/jquery.js"></script>
        <script src="js/common/common.js"></script>
        <script src="js/common/animation.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>